<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城商城搜索</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.aui-bar-nav {
			color: #212121;
		}

		.aui-bar-nav .aui-pull-right {
			display: inline-block;
			/*padding-left: .65rem;*/
			color: #fff;
			font-size: .75rem;
			font-weight: 400;
			float: right;
			margin-right: -.5rem;
			line-height: 2.35rem;
		}

		.aui-bar-nav .aui-pull-left {
			height: 1.7rem;
			line-height: 1.7rem;
			background-color: #F5F5F5;
			border-radius: 0.9rem;
			margin-top: 0.275rem;
			width: calc(100vw - 3.05rem);
			width: -webkit-calc(100vw - 3.05rem);
		}

		::placeholder {
			color: #BBBBBB;
			font-size: .65rem;
			font-weight: 400;
			padding-left: .25rem;
		}

		.actijj {}

		.mask_div {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.3);
		}
		input::-webkit-input-placeholder {
			transform: translateX(-0.1rem);
		}
		.deletMsg{
			position: relative;
			z-index: 1000;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>

		<!-- 头部—搜索框设置 -->
		<!-- v-if='head_change' -->
		<header  v-if='head_change' class="aui-bar aui-bar-nav" id="aui-header" style="position:relative;padding:0 .75rem;position:relative;background:rgba(0,90,147,1);">
			<div class="aui-pull-left" style="width:86.95%;margin-bottom:.3rem;padding:0;padding-left:0.75rem;">
				<img style="width:0.65rem;height:0.7rem;display: inline-block;" src="../../image/btn/btn-search-new.svg" />
				<form style="width: 100%;">
					<input id="search_input" @input="search_key"  v-model="keywords" style="padding-left:0.25rem;font-family:PingFangSC-Regular;font-weight:400;font-size:.65rem;color:rgba(34,34,34,1);" type="text" placeholder="搜索商品" />
				</form>
				<!-- 删除输入框值 -->
				<img class="deletMsg" v-if="keywords" src="../../image/icon/delete_msg.svg" alt="" style="margin-right:0.75rem;" tapmode onclick="clearkeywords()">
			</div>
			<span class="aui-pull-right aui-btn" tapmode onclick="close_win()" style="width:1.5rem;padding:0;margin-right:0.65rem!important;padding-left:0.7rem;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color: #ffffff;;display:inline-block;">
						取消
			</span>
		</header>

		<header v-else class="aui-bar aui-bar-nav" id="aui-header" style="position:relative;padding:0 .75rem;position:relative;background:rgba(0,90,147,1);">
			<div class="aui-pull-left" style="width:86.95%;margin-bottom:.3rem;padding:0;padding-left:0.75rem;">
				<img style="width:0.65rem;height:0.7rem;display: inline-block;" src="../../image/btn/btn-search-new.svg" />
				<form  style="width: 100%;">
					<input id="search_input"  @input="search_key"  v-model="keywords" style="padding-left:0.25rem;font-family:PingFangSC-Regular;font-weight:400;font-size:.65rem;color:rgba(34,34,34,1);" type="text" placeholder="搜索商品" />
				</form>
				<!-- 删除输入框值 -->
				<img class="deletMsg" v-if="keywords" src="../../image/icon/delete_msg.svg" alt="" style="margin-right:0.75rem;" tapmode onclick="clearkeywords()">
			</div>
			<span class="aui-pull-right aui-btn" tapmode onclick="close_win()" style="width:1.5rem;padding:0;margin-right:0.65rem!important;padding-left:0.7rem;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color: #ffffff;;display:inline-block;">
						取消
			</span>
		</header>
		<!-- <header v-else  class="aui-bar aui-bar-nav" id="aui-header" style="position:relative;padding:0 .5rem;position:relative;border-bottom:1px solid transparent;background:rgba(0,90,147,1);">
			<span tapmode onclick="close_win()" style="display:inline-block;width: 10%;height:1.1rem;float:left;">
					<img class="btn-img-back" src="../../image/btn/btn-back-4.png" style="width: 5rem;padding-top: 0rem;" />
			</span>
			<div class="aui-pull-left" style="width:80%;margin-bottom:.3rem;padding:0;padding-left:0.75rem;">
				<img style="width:0.65rem;height:0.7rem;display: inline-block;margin-right:0.25rem;" src="../../image/btn/btn-search-new.svg" />
				<form onsubmit="return search_key()" style="width: 100%;">
					<input id="search_input" v-model="keywords" style="padding-left:0.25rem;font-family:PingFangSC-Regular;font-weight:400;font-size:.65rem;color:rgba(34,34,34,1);" type="text" placeholder="搜索商品" />
				</form>

			</div>
		</header> -->
		<!-- 删除输入框值 -->
		<!-- <img class="deletMsg" v-if="keywords" src="../../image/icon/delete_msg.svg" alt="" style="margin-right:0.75rem;" tapmode onclick="clearkeywords()"> -->


	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			keywords: '',
			head_change:true
		},
		methods: {},
		watch: {
			keywords: function(a, b) {
				send_event('keywords', {
					keywords: a
				})
			}
		},
	})
	apiready = function() {
		$api.fixStatusBar($api.byId('aui-header'))
		open_frame('search_f', 'search_f.html', 'aui-header', false)
		add_event('keywords_change', function(ret) {
				vm.keywords = ret.keywords
				setTimeout(function() {
					search_key()
				}, 30)
			}),
			api.addEventListener({
				name: 'mask'
			}, function(ret, err) {
				if (ret) {
					var header_mask = document.getElementById("aui-header");
					var mask_div = document.createElement('div');
					mask_div.classList.add('mask_div')
					document.getElementById('aui-header').appendChild(mask_div)
				}
			}),
			api.addEventListener({
				name: 'mask_cancel'
			}, function(ret, err) {
				if (ret) {
					var cancel = document.getElementsByClassName("mask_div")[0];
					cancel.classList.remove('mask_div')
				}
			});
	};

	function clearkeywords() {
		vm.keywords = ''
	}

	function search_key() {
		if (vm.keywords == '') {
			toast('请输入内容')
			return false;
		}
		vm.head_change = false;
		send_event('do_search')
		// var input = document.getElementById("search_input");
		// input.blur();
		return false;
	}
</script>

</html>
